<template>
  <el-drawer
    :title="title"
    :visible.sync="drawerVisible"
    direction="rtl"
    size="67%"
    :before-close="handleClose"
    custom-class="drawer-container"
  >
    <div class="drawer-content">
      <div class="detail-header">
        <el-button type="primary" size="small" icon="el-icon-printer" @click="handlePrint">打印运单</el-button>
      </div>

      <el-tabs v-model="activeTab">
        <!-- 基本信息标签页 -->
        <el-tab-pane label="基本信息" name="basic">
          <div class="detail-section">
            <h3 class="section-title">运单信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">运单编号：</span>
                  <span class="detail-value">{{ shipmentInfo.shipmentCode }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">运单状态：</span>
                  <span class="detail-value">
                    <el-tag :type="getStatusType(shipmentInfo.shipmentStatus)">
                      {{ getStatusText(shipmentInfo.shipmentStatus) }}
                    </el-tag>
                  </span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">创建时间：</span>
                  <span class="detail-value">{{ parseTime(shipmentInfo.createTime) }}</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="detail-section">
            <h3 class="section-title">发货信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">发货方：</span>
                  <span class="detail-value">{{ shipmentInfo.senderName }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">联系人：</span>
                  <span class="detail-value">{{ shipmentInfo.senderContactName }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">联系电话：</span>
                  <span class="detail-value">{{ shipmentInfo.senderContactPhone }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="16">
                <div class="detail-item">
                  <span class="detail-label">发货地址：</span>
                  <span class="detail-value">{{ shipmentInfo.senderAddress }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">坐标：</span>
                  <span class="detail-value" v-if="shipmentInfo.senderLongitude && shipmentInfo.senderLatitude">
                    {{ shipmentInfo.senderLongitude }}, {{ shipmentInfo.senderLatitude }}
                  </span>
                  <span class="detail-value" v-else>-</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="detail-section">
            <h3 class="section-title">收货信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">收货方：</span>
                  <span class="detail-value">{{ shipmentInfo.receiverName }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">联系人：</span>
                  <span class="detail-value">{{ shipmentInfo.receiverContactName }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">联系电话：</span>
                  <span class="detail-value">{{ shipmentInfo.receiverContactPhone }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="16">
                <div class="detail-item">
                  <span class="detail-label">收货地址：</span>
                  <span class="detail-value">{{ shipmentInfo.receiverAddress }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">坐标：</span>
                  <span class="detail-value" v-if="shipmentInfo.receiverLongitude && shipmentInfo.receiverLatitude">
                    {{ shipmentInfo.receiverLongitude }}, {{ shipmentInfo.receiverLatitude }}
                  </span>
                  <span class="detail-value" v-else>-</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="detail-section">
            <h3 class="section-title">货物信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">货物名称：</span>
                  <span class="detail-value">{{ shipmentInfo.goodsName }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">货物类型：</span>
                  <span class="detail-value">{{ getGoodsTypeText(shipmentInfo.goodsType) }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">货物重量：</span>
                  <span class="detail-value">{{ shipmentInfo.goodsWeight }} kg</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">货物体积：</span>
                  <span class="detail-value">{{ shipmentInfo.goodsVolume }} m³</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">运输方式：</span>
                  <span class="detail-value">{{ getTransportModeText(shipmentInfo.transportMode) }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">运费：</span>
                  <span class="detail-value">{{ shipmentInfo.freight }} 元</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">预计发货时间：</span>
                  <span class="detail-value">{{ shipmentInfo.estimatedShipDate }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">预计到达时间：</span>
                  <span class="detail-value">{{ shipmentInfo.estimatedArrivalDate }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">支付方式：</span>
                  <span class="detail-value">{{ getPaymentMethodText(shipmentInfo.paymentMethod) }}</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="detail-section">
            <h3 class="section-title">可追溯信息</h3>
          </div>

          <div class="detail-section">
            <h3 class="section-title">备注</h3>
            <div class="remark-content">
              {{ shipmentInfo.remark || '无' }}
            </div>
          </div>
        </el-tab-pane>


      </el-tabs>
    </div>
  </el-drawer>
</template>

<script>
import { parseTime } from '@/utils/ruoyi'

export default {
  name: 'ShipmentDetailDrawer',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '运单详情'
    },
    shipmentInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      drawerVisible: false,
      activeTab: 'basic'
    }
  },
  watch: {
    visible(val) {
      this.drawerVisible = val
      if (val) {
        this.activeTab = 'basic'
      }
    },
    drawerVisible(val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    parseTime,
    /** 获取运单状态类型 */
    getStatusType(status) {
      const statusMap = {
        '1': 'warning',  // 待发货
        '2': 'primary',  // 运输中
        '3': 'success',  // 已签收
        '4': 'info'      // 已取消
      }
      return statusMap[status] || ''
    },
    /** 获取运单状态文本 */
    getStatusText(status) {
      const statusMap = {
        '1': '待发货',
        '2': '运输中',
        '3': '已签收',
        '4': '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    /** 获取货物类型文本 */
    getGoodsTypeText(type) {
      const typeMap = {
        '1': '普通货物',
        '2': '易碎品',
        '3': '液体',
        '4': '危险品',
        '5': '贵重物品'
      }
      return typeMap[type] || '未知类型'
    },
    /** 获取运输方式文本 */
    getTransportModeText(mode) {
      const modeMap = {
        '1': '公路运输',
        '2': '铁路运输',
        '3': '水路运输',
        '4': '航空运输'
      }
      return modeMap[mode] || '未知方式'
    },
    /** 获取支付方式文本 */
    getPaymentMethodText(method) {
      const methodMap = {
        '1': '寄付',
        '2': '到付',
        '3': '月结',
        '4': '第三方付'
      }
      return methodMap[method] || '未知方式'
    },

    /** 打印运单 */
    handlePrint() {
      this.$message.success('打印功能模拟：正在打印运单')
      // 实际打印功能实现
    },
    /** 关闭抽屉 */
    handleClose() {
      this.drawerVisible = false
    }
  }
}
</script>

<style scoped>
.drawer-content {
  padding: 20px;
}
.detail-header {
  margin-bottom: 20px;
  text-align: right;
}
.detail-section {
  margin-bottom: 30px;
}
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}
.detail-item {
  margin-bottom: 15px;
}
.detail-label {
  color: #606266;
  font-weight: bold;
}
.detail-value {
  color: #303133;
}
.remark-content {
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
  min-height: 60px;
}
.timeline-operator {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
</style>